<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    header {
        height: 30px;
        background-color: rgb(61, 61, 61);
    }

    header>ul {
        margin-right: 100px;
    }

    li {
        list-style: none;
        float: right;
        line-height: 30px;
        padding: 0 10px;
        box-sizing: border-box;
    }

    header a {
        text-decoration: none;
        color: #ccc;
        font-size: 14px;
    }

    header li:hover {
        background-color: rgb(255, 103, 0);
    }
    body{
        background-color: rgb(245,245,245);
    }
    .banner {
        height: 102px;
        width: 100%;
        background-color: #fff;
        border-bottom: 2px solid rgb(255, 103, 0);
    }

    .banner_left {
        width: 50%;
        height: 102px;
        float: left;
    }

    .banner_left img {
        width: 48px;
        height: 48px;
        margin-left: 100px;
        float: left;
        margin-top: 30px;
    }

    .banner_left>:nth-child(2) {
        font-size: 28px;
        font-weight: 400;
        line-height: 48px;
        margin-left: 40px;
        float: left;
        margin-top: 30px;
    }

    .banner_left>:nth-child(3) {
        font-size: 14px;
        margin-left: 10px;
        margin-top: 50px;
        float: left;
        color: #999999;
    }
    .carList table{
        margin: 0 auto;
        background-color: #fff;
        margin-top: 20px;
        border: none;
    }
    .carList table th,.carList table td{
        border-collapse: collapse;
    }
    .carList table tbody img{
        width: 80px;
        height: 80px;
    }
    .carList table td{
        border: 0;
    }
    .resultPrice{
        width: 840px;
        height: 50px;
        margin: 0 auto;
        background-color: #fff;
        margin-top: 20px;
    }
</style>

<body>
    <header>
        <ul>
            <li><a href="javascript:;">我的订单</a></li>
            <li><a href="javascript:;">我的收藏</a></li>
            <li><a href="javascript:;">购物车</a></li>
            <li><a href="javascript:;">欢迎admin</a></li>
        </ul>
    </header>
    <section>
        <div class="banner">
            <div class="banner_left">
                <img src="img/xiaomi.webp" alt="">
                <span>我的购物车</span>
                <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
            </div>
            <div class="banner_right"></div>
        </div>
        <div class="carList">
            <table border="0">
                <thead>
                    <th><input type="checkbox" id="selectAll"> 全选</th>
                    <th width="150px">商品名称</th>
                    <th width="100px">商品图片</th>
                    <th width="100px">单价</th>
                    <th >数量</th>
                    <th width="100px">小计</th>
                    <th width="100px">操作</th>
                </thead>
                <tbody>
                    <tr>
                        <td align="center"><input type="checkbox" class="check"></td>
                        <td align="center">Xiaomi 14</td>
                        <td align="center"><img src="img/p1.png"></td>
                        <td align="center"><span class="price">4299</span>元</td>
                        <td>
                            <button style="width: 20px;" class="deBtn">-</button>
                            <input type="number" value="1" class="itemCount">
                            <button style="width: 20px;" class="inBtn">+</button>
                        </td>
                        <td align="center"><span class="totalPrice">4299.00</span>元</td>
                        <td align="center"><button class="rmItem">移除商品</button></td>
                    </tr>
                    <tr>
                        <td align="center"><input type="checkbox" class="check"></td>
                        <td align="center">RedmiBook Pro 14</td>
                        <td align="center"><img src="img/pb1.jpg" alt=""></td>
                        <td align="center"><span class="price">3299</span>元</td>
                        <td>
                            <button style="width: 20px;" class="deBtn">-</button>
                            <input type="number" value="1" class="itemCount">
                            <button style="width: 20px;" class="inBtn">+</button>
                        </td>
                        <td align="center"><span class="totalPrice">3299.00</span>元</td>
                        <td align="center"><button class="rmItem">移除商品</button></td>
                    </tr>
                    <tr>
                        <td align="center"><input type="checkbox" class="check"></td>
                        <td align="center">Redmi Note 11Pro</td>
                        <td align="center"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=225&h=225&f=webp&q=90" alt=""></td>
                        <td align="center"><span class="price">1799</span>元</td>
                        <td>
                            <button style="width: 20px;" class="deBtn">-</button>
                            <input type="number" value="1" class="itemCount">
                            <button style="width: 20px;" class="inBtn">+</button>
                        </td>
                        <td align="center"><span class="totalPrice">1799.00</span>元</td>
                        <td align="center"><button class="rmItem">移除商品</button></td>
                    </tr>  
                </tbody>
            </table>
        </div>
        <div class="resultPrice">
            <div class="left fl">
                <span class="fl" style="width: 100px;line-height: 50px;text-align: center;color: #999999;">继续购物</span>
                <div class="line fl" style="width: 20px;line-height: 50px;text-align: center;color: #999999;">|</div>
                <div class="fl" style="width: 200px;line-height: 50px;text-align: center;color: #999999;">共<span style="color: rgb(255,103,0);" class="itemAll">0</span>件商品，已选择<span style="color: rgb(255,103,0);" class="selectCnt">0</span>件</div>
            </div>
            <div class="right fr" style="color: rgb(255, 103, 0); line-height: 50px;font-size: 14px;">
                合计：<span class="prices" style="font-size: 20px;">0.00</span>元
                <button style="border: none;background-color: rgb(255, 103, 0);width: 130px;height: 50px;color: #fff;">去结算</button>
            </div>
        </div>
    </section>
</body>
<script src="js/shopping.js"></script>
</html>